<template>
  <div class="qrcode-wrapper">
    <div class="item-pic">
      <div class="qrcode-item" v-loading="qrcodeStatus == 0">
        <div ref="qrcode" class="img"></div>
        <div class="qrcode-mark" v-if="qrcodeStatus == 2 || qrcodeStatus == 3">
          <i class="el-icon-refresh-left" @click="getLoginQRCode"></i>
          <span style="font-size: 15px">刷新</span>
        </div>
      </div>
    </div>
    <span class="alert-text"
      >请使用<span class="tag-text">移动OA客户端</span>扫码登录</span
    >
  </div>
</template>

<script>
import { getLoginQRCode, loginScanCode } from "@core/api/login";
import QRCode from "qrcodejs2-fix";
export default {
  data() {
    return {
      //二维码unid
      unid: "",
      //时间
      time: 0,
      //计时器
      timer: null,
      //请求中
      checking: false,
      qrcodeStatus: -1, // -1: 未知状态, 0: 获取中, 1: 正常, 2: 获取失败, 3: 二维码过期
    };
  },
  beforeDestroy() {
    this.clearInterval();
  },
  methods: {
    //获取二维码
    getLoginQRCode() {
      if ([0, 1].includes(this.qrcodeStatus)) {
        return;
      }
      this.qrcodeStatus = 0;
      getLoginQRCode()
        .then(({ code, result }) => {
          if (code == 200) {
            this.unid = result.unid;
            this.qrcodeStatus = 1;
            this.generateQRCode();
            this.loopCheckLogin();
          }
        })
        .catch((e) => {
          this.$message.error("获取二维码失败！");
          this.qrcodeStatus = 2;
          this.generateQRCode();
        });
    },
    //轮询
    loopCheckLogin() {
      this.clearInterval();
      this.timer = setInterval(() => {
        this.time += 1;
        //每十秒轮询
        if (this.time < 5) {
          return;
        }
        //10秒后没有请求完
        if (this.checking) {
          this.clearInterval();
        }
        this.time = 0;
        this.loginScanCode();
      }, 1000);
    },
    clearInterval() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    //检测登录
    loginScanCode() {
      this.checking = true;
      loginScanCode({ code: this.unid })
        .then(({ code,result }) => {
          this.checking = false;
             console.log("登录成功！11");
          if (result.isExpired || code == 500) {
            this.clearInterval();
            this.qrcodeStatus = 3;
          } else if (result.TOKEN) {
            this.$message.success("登录成功！");
            this.clearInterval();
            this.$store.commit("user/SET_TOKEN", result.TOKEN);
            this.$emit("on-login");
          }
        })
        .catch((e) => {
          console.error(e);
          this.checking = false;
          this.clearInterval();
          this.qrcodeStatus = 3;
        });
    },
    // 生成二维码
    generateQRCode() {
      // 清除上一次的二维码
      if (this.$refs.qrcode) {
        this.$refs.qrcode.innerHTML = ""; // 清除二维码方法
      }
      let text = '/pages/qrcode-login/qrcode-login?code=' + this.unid;
      if (this.qrcodeStatus == 2) {
        text = "获取二维码失败！";
      }
      // 生成二维码
      this.qrcode = new QRCode(this.$refs.qrcode, {
        width: 200, // 二维码宽度 （不支持100%）
        height: 200, // 二维码高度（不支持100%）
        text: btoa(unescape(encodeURIComponent(text))), // 后端返回的二维码地址
        render: "canvas", // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.qrcode-wrapper {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  .item-pic {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .qrcode-item {
      position: relative;
      .img {
        width: 200px;
        height: 200px;
      }
      .qrcode-mark {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 30px;
        cursor: pointer;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.8);
        transition: opacity 0.3s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .alert-text {
    line-height: 60px;
    font-size: 14px;
  }
  .tag-text {
    color: #1890ff;
    margin: 0 2px;
  }
}
</style>